<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/res/css/admin/home.css"/>
</head>

<body>




<div id="div_home_context">
    <div id="date_context">
        <input type="date" name="startDate" id="startDate">
        <input type="date" name="endDate" id="endDate">
        <button id="dateSearch">查询</button>
    </div>
    <ul id="chartTotal">
        <li id="productTotal">
            <p class="chartTotalTitle">
                <span class="chartTitleText">上架产品数量</span>
                <span class="chartTitleUnit">(单位：件)</span>
            </p>
            <span class="chartTotalValue">${requestScope.productTotal}</span>
            <div class="chartTotalStyle" style="background-color: #f89e9e"></div>
        </li>

        <li id="userTotal">
            <p class="chartTotalTitle">
                <span class="chartTitleText">用户注册数量</span>
                <span class="chartTitleUnit">(单位：人)</span>
            </p>
            <span class="chartTotalValue">${requestScope.userTotal}</span>
            <div class="chartTotalStyle" style="background-color: #4c7bcb"></div>
        </li>

        <li id="orderTotal">
            <p class="chartTotalTitle">
                <span class="chartTitleText">订单成交数量</span>
                <span class="chartTitleUnit">(单位：件)</span>
            </p>
            <span class="chartTotalValue">${requestScope.orderTotal}</span>
            <div class="chartTotalStyle" style="background-color: #fffc00"></div>
        </li>
    </ul>
</div>

<script>
    $(function (){
        //查询按钮绑定点击事件
        $('#dateSearch').click(function (){
            var sDate = $('#startDate').val();//通过jQuery 获取点击事件
            var eDate = $('#endDate').val();
            //定义
            var pData = {
                "startDate":sDate,
                "endDate":eDate
            }
            //ajax请求
            $.ajax({
                url:contextPath + "/admin/home?action=goHome",
                method:'POST',
                data:pData,
                success: function (res) {
                    $('#productTotal').find('.chartTotalValue').html(res.productTotal);
                    $('#userTotal').find('.chartTotalValue').html(res.userTotal);
                    $('#orderTotal').find('.chartTotalValue').html(res.orderTotal);
                    console.log(res);
                }
            })
        });
    })
</script>

</body>
</html>
